<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!--Meta Informations-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Site Title-->
    <title>MLearning-您的专属推荐</title>

    <!--Favicons-->
    <link rel="apple-touch-icon" sizes="60x60" th:href="@{assets/favicon/logo2.png}">
    <link rel="icon" type="image/png" th:href="@{assets/favicon/logo5.png}" sizes="32x32">
    <link rel="icon" type="image/png" th:href="@{assets/favicon/logo4.png}" sizes="16x16">
    <link rel="manifest" th:href="@{assets/favicon/manifest.json}">
    <link rel="mask-icon" th:href="@{assets/favicon/safari-pinned-tab.svg}" color="#5bbad5">
    <link rel="shortcut icon" th:href="@{assets/favicon/logo3.png}">
    <meta name="msapplication-config" content="assets/favicon/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">

    <!--Style Assets-->
    <link rel="stylesheet" th:href="@{bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{vendors/fontawesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{vendors/owl/owl.carousel.css}">

    <!--Theme Style-->
    <link rel="stylesheet" th:href="@{assets/css/styles.css}">

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link rel="stylesheet" th:href="@{masonry/masonry.css}">

</head>
<body>

<div id="page" class="site row">
    <header id="header" class="site-header">

        <nav class="navbar navbar-defatult navbar-fixed-top fluid-navbar navbar-style1" style="background: #36424d;">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a th:href="@{/}" class="navbar-brand">
                        <img th:src="@{assets/icons/logo9.png}" alt="" class="logo-img"/></a>
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav"
                            aria-expanded="false">
                        <span class="sr-only">Nav Opener</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="main-nav">
                    <ul class="navbar-nav nav navbar-right">
                        <li class="active"><a th:href="@{/}">主页</a></li>
                        <li><a th:href="@{show}">知识路径图</a></li>
                        <li><a th:href="@{../login}">
                            <i class="fa fa-sign-in"></i> 登录 </a>
                        </li>
                        <li><a th:href="@{register}"><i class="fa fa-user"></i> 注册 </a></li>
                        <!--                        <li><a href="#">Buy Pro Version</a></li>-->
                    </ul>
                </div>
            </div>
        </nav>

    </header>

    <main id="contents" class="site-contnts">

        <!--Find Domain-->
        <form class="row domain-search bg-pblue" method="post" th:action="@{show}" style="padding-top: 150px;">
            <div class="container">
                <div class="row">
                    <div class="col-md-3">
                        <h2 class="form-title">搜索你想学的 <strong>知识</strong></h2>
                        <!--                        <p>Search for your dream domain now</p>-->
                    </div>
                    <div class="col-md-9">
                        <div class="input-group">
                            <input type="search" class="form-control" name="search">
                            <span class="input-group-addon"><input type="submit" value="搜索"
                                                                   class="btn btn-primary"></span>
                        </div>
                        <p><strong>机器学习</strong> <strong>神经网络</strong><strong>python</strong>
                            <strong>爬虫</strong></p>
                    </div>
                </div>
            </div>
        </form>

        <!--        Blogs-->
        <div class="demo clearfix">
            <div id="recBooks" class="item_list infinite_scroll" style="padding-bottom: 50px;">
                <div class="item masonry_brick" th:each="entry:${recBooks}">
                    <div class="item_t">
                        <div class="img">
                           <img width="210" height="285" th:alt="${entry['book'].getName()}" th:src="${entry['book'].getImg()}"/>
                           <span class="price" th:text="${entry['book'].getAuthor()}"></span>
                           <div class="btns">
                             <a class="img_album_btn" th:href="'book_detail?id='+${entry['book'].getId()}">了解详情</a>
                           </div>
                        </div>
                        <div class="title">
                            <h4>
                                <strong th:text="${entry['book'].getName()}"></strong>
                            </h4>
                            <aside class="row widget widget_tag_cloud" style="margin-bottom: 0px;">
                                <div class="tagcloud">
                                    <a onclick="" class="tag-link-1 recknow" th:each="tag:${entry['tag']}" th:text="${tag}" style='margin-right: 5px'></a>
                                </div>
                            </aside>
                        </div>
                    </div>

                    <div class="item_b clearfix">
                        <div class="items_likes fl">
                            <a th:href="'book_detail?id='+${entry['book'].getId()}" class="like_btn"></a>
                            <em class="bold">916</em>
                        </div>
                        <div class="items_comment fr">
                            <a href="http://www.htmleaf.com/">评分</a>
                            <em class="bold" th:text="${entry['book'].getScore()}"></em>
                        </div>
                    </div>
                </div>
            </div>
            <div id="more"><a href="page/2.html"></a></div>

            <div id="bottom_page" class="page" style="display:none;">
                <div class="page_num">
                    <span class="unprev"></span>
                    <span class="current">1</span>
                    <a href="http://www.htmleaf.com/">&nbsp;2&nbsp;</a>
                    <a href="http://www.htmleaf.com/">&nbsp;3&nbsp;</a>
                    <a href="http://www.htmleaf.com/">&nbsp;4&nbsp;</a>
                    <a href="http://www.htmleaf.com/">&nbsp;5&nbsp;</a>
                    <span class="etc"></span>
                    <a href="http://www.htmleaf.com/">12</a>
                    <a href="http://www.htmleaf.com/" class="next"></a>
                </div>
            </div>
        </div>
    </main>
</div>

<div style="display:none;" id="gotopbtn" class="to_top"><a title="返回顶部" href="javascript:void(0);"></a></div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script th:src="@{vendors/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{masonry/jquery.masonry.js}"></script>

<script type="text/javascript">
    var isWidescreen = screen.width >= 1280;
    if (isWidescreen) {
        document.write("<style type='text/css'>.demo{width:1194px;}</style>");
    }
</script>
<script type="text/javascript">
    function item_masonry() {
        $('.item img').load(function () {
            $('.infinite_scroll').masonry({
                itemSelector: '.item',
                columnWidth: 275,//与.item的width保持一致
                gutter: 15,
                horizontalOrder: false
            });
        });
        $('.infinite_scroll').masonry({
            itemSelector: '.item',
            columnWidth: 275,
            gutter: 15,
            horizontalOrder: false
        });
    }

    //允许你绑定一个在DOM（不包含图片）文档载入完成后执行的函数。
    $(function () {
        function item_callback() {
            $('.item').mouseover(function () {
                $(this).css('box-shadow', '0 1px 5px rgba(35,25,25,0.5)');
                $('.btns', this).show();
            }).mouseout(function () {
                $(this).css('box-shadow', '0 1px 3px rgba(34,25,25,0.2)');
                $('.btns', this).hide();
            });

            item_masonry();
        }

        item_callback();

        // $('.item').fadeIn("900");
        // var sp = 1;

        // $(".infinite_scroll").infinitescroll({
        //     navSelector: "#more",
        //     nextSelector: "#more a",
        //     itemSelector: ".item",
        //
        //     loading: {
        //         img: "masonry/images/masonry_loading_1.gif",
        //         msgText: ' ',
        //         finishedMsg: '木有了',
        //         finished: function () {
        //             sp++;
        //             if (sp >= 10) { //到第10页结束事件
        //                 $("#more").remove();
        //                 $("#infscr-loading").hide();
        //                 $("#bottom_page").show();
        //                 $(window).unbind('.infscr');
        //             }
        //         }
        //     }, errorCallback: function () {
        //         $("#bottom_page").show();
        //     }
        //
        // }, function (newElements) {
        //     var $newElems = $(newElements);
        //     $('.infinite_scroll').masonry('appended', $newElems, false);
        //     $newElems.fadeIn();
        //     item_callback();
        //     return;
        // });

    });
</script>

<script th:src="@{bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{vendors/owl/owl.carousel.min.js}"></script>
<script th:src="@{vendors/mcustomscrollbar/jquery.mCustomScrollbar.concat.min.js}"></script>
<script th:src="@{vendors/isotope.pkgd.min.js}"></script>
<script th:src="@{vendors/imagesloaded.pkgd.min.js}"></script>
<!--Theme JS-->
<script th:src="@{assets/js/hostpro.js}"></script>

<script type="text/javascript">
    $(function () {

        $(window).scroll(function () {
            $(window).scrollTop() > 1000 ? $("#gotopbtn").css('display', '').click(function () {
                $(window).scrollTop(0);
            }) : $("#gotopbtn").css('display', 'none');
        });

    });
</script>

</body>
</html>